<template>
  <svg
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    viewBox="10 -200 400 400"
    xml:space="preserve"
  >
    <g id="rings">
      <circle cx="205" cy="17" r="165" stroke="#21425a" fill="none" stroke-width="15px" />

      <ellipse
        cx="205"
        cy="17"
        rx="70"
        ry="70"
        stroke="#f28b1b"
        fill="none"
        stroke-width="6px"
        stroke-opacity="0.8"
      >
        <animate
          attributeName="rx"
          begin="0s"
          dur="4s"
          values="70;1;70"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animate
          attributeName="rx"
          begin="0s"
          dur="4s"
          values="70;1;70"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 205 17"
          to="180 205 17"
          dur="2s"
          repeatCount="indefinite"
        />
      </ellipse>

      <ellipse
        cx="205"
        cy="17"
        rx="100"
        ry="100"
        stroke="#21425a"
        fill="none"
        stroke-width="10px"
        stroke-opacity="0.8"
      >
        <animate
          attributeName="rx"
          begin="0s"
          dur="6s"
          values="100;1;100"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animate
          attributeName="rx"
          begin="0s"
          dur="6s"
          values="100;1;100"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 205 17"
          to="180 205 17"
          dur="3s"
          repeatCount="indefinite"
        />
      </ellipse>

      <ellipse
        cx="205"
        cy="17"
        rx="135"
        ry="135"
        stroke="#ccc"
        fill="none"
        stroke-width="12px"
        stroke-opacity="0.8"
      >
        <animate
          attributeName="rx"
          begin="0s"
          dur="4s"
          values="130;1;130"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animate
          attributeName="rx"
          begin="0s"
          dur="4s"
          values="130;1;130"
          calcMode="linear"
          repeatCount="indefinite"
        />
        <animateTransform
          attributeName="transform"
          type="rotate"
          from="0 205 17"
          to="180 205 17"
          dur="8s"
          repeatCount="indefinite"
        />
      </ellipse>
    </g>
  </svg>
</template>
